<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<title>更新单词 v0.1</title>
<!--
v0.1 勉强可用了
-->
<style>
.data,.data textarea,.data select,.data button,.data input{margin:10px; padding:10px;}
.data textarea{height:200px; width:80%}
.data button{cursor:pointer;}
#id,
#show{color:#ccc;}
</style>

<div class=data>
	<span>Update the word to DB</span>
	<hr>
	id: <span id='id'></span><br>
	word: <input type=input  id='word'></input><br>
	phonetic: <input type=input id='phonetic'><br>
	meaning: <textarea type=input id='meaning'></textarea><br>
	<button id='submit'>Submit</button>
</div>

<div id='show'></div>

<script src="/static/js/jquery.min.js"></script>
<script>

//获取url中的参数 https://www.cnblogs.com/vicky-li/p/9145026.html
function getUrlParam(name) {
	var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
	var r = window.location.search.substr(1).match(reg);  //匹配目标参数
	if (r != null) return unescape(r[2]); return null; //返回参数值
}




var print=console.log
$(document).ready(function(){
	//获取id
	var id=getUrlParam('id');
	if(id==null){
		alert('No id found!请在url指定地址')
		//提交按钮不可用
		$('#submit')[0].disabled=true;
		return false;
	}
	
	//请求数据库，填充内容
	$.get('http://127.0.0.1:20180/api/word/id/'+id, function(data,status){
		if(status=='success'){
			console.log('OK:',data,status)
			$('#id').html(data[0][0]);
			$('#word').val(data[0][1]);
			$('#phonetic').val(data[0][2]);
			$('#meaning').val(data[0][3]);
		}else{
			console.log('Error',data,status)
		}
	});
	
	
	//如果更新
	$('#submit').click(function(){
		//1.获取单词音标、意思
		var word=$('#word').val()
		var phonetic=$('#phonetic').val()
		var meaning=$('#meaning').val()
		//
		if(word==''){
			alert('请填写文本')
			$('#word').focus()
			return false;
		}
		//output
		//console.log('words=',word,'; \nphonetic=',phonetic,'; \nmeaning=',meaning)
		
		//2.ajax to the backend
		$.post('http://127.0.0.1:20180/api/updateWord/',{
			'id':id,
			'word':word,
			'phonetic':phonetic,
			'meaning':meaning
		}, function(data,status){
			if(status=='success'){
				console.log('OK:',data,status)
				if(data.status==1){
					$('#show').html('status: '+data.data[1]+'<br>'+data.data[0]+'<br>'+data.data[2])
				}
			}else{
				console.log('Err: ',data,status)
			}
		});
	});
});
</script>